<template>
  <div>
    <div class="options">
      <!-- <div class="option">发作记录</div>
      <div class="option">用药记录</div>
      <div class="option">就诊记录</div> -->
      <van-button
        :class="[selectBtn === 'list1' ? 'active' : 'notActive']"
        class="option"
        @click="btnActive('list1')"
        >发作记录</van-button
      >
      <van-button
        :class="[selectBtn === 'list2' ? 'active' : 'notActive']"
        class="option"
        @click="btnActive('list2')"
        >用药记录</van-button
      >
      <van-button
        :class="[selectBtn === 'list3' ? 'active' : 'notActive']"
        class="option"
        @click="btnActive('list3')"
        >就诊记录</van-button
      >
    </div>
    <div class="date">
      <el-date-picker
        v-model="value"
        type="date"
        @change="dateChange"
        value-format="yyyy-MM-dd"
        format="yyyy年MM月dd日"
        placeholder="选择日期"
        @focus="elDatePickerOnFocus"
      >
      </el-date-picker>
      <el-button
        type="primary"
        icon="el-icon-document-add"
        circle
        :disabled="value == null"
        @click="addDoc(selectBtn)"
      ></el-button>
    </div>
    <div class="record-list">
      <div v-for="(item, index) in selectList" :key="index">
        <van-panel :title="item.title" :desc="item.desc" status="2020.12.05">
          <div class="info" v-for="(i, index) in item.info" :key="index">
            {{ i.key }}<span>{{ i.value }}</span>
          </div>
          <!-- <div class="info">{{ item.info.key }}<span>小于五分钟</span></div>
        <div class="info">{{ item.info[2] }}<span>突然发作</span></div> -->
          <div class="info"></div>
          <div></div>
        </van-panel>
      </div>
    </div>
    <el-dialog
      title="发作记录"
      :visible.sync="dialogVisible"
      width="100%"
      :before-close="handleClose"
      @touchmove.prevent
      fullscreen
    >
      <el-form ref="form" :model="form" label-position="top">
        <el-form-item label="1、发作时间">
          <el-col :span="13">
            <el-date-picker
              type="date"
              placeholder="日期"
              v-model="form.date1"
              style="width: 100%"
              @focus="elDatePickerOnFocus"
            ></el-date-picker>
          </el-col>
          <!-- <el-col class="line" :span="2">-</el-col> -->
          <!-- <el-col :span="11">
            <el-time-picker
              placeholder="时间"
              v-model="form.date2"
              style="width: 100%"
              @focus="elDatePickerOnFocus"
            ></el-time-picker>
          </el-col> -->
        </el-form-item>
        <!-- <el-form-item label="2、发作时长">
          <el-col :span="20"><el-input v-model="form.name"></el-input></el-col>
          <el-col :span="4"><div style="margin-left: 6px">分钟</div></el-col>
        </el-form-item> -->
        <el-form-item label="2、发作次数">
          <el-col :span="20"><el-input v-model="form.name"></el-input></el-col>
          <el-col :span="4"><div style="margin-left: 6px">分钟</div></el-col>
        </el-form-item>
        <el-form-item label="3、发作年龄">
          <el-col :span="20"><el-input v-model="form.name"></el-input></el-col>
          <el-col :span="4"><div style="margin-left: 6px">分钟</div></el-col>
        </el-form-item>

        <el-form-item label="4、活动性质" prop="type">
          <el-checkbox-group v-model="ruleForm.type" class="resonse">
            <el-checkbox label="无诱因" name="type"></el-checkbox>
            <el-checkbox label="饮酒" name="type"></el-checkbox>
            <el-checkbox label="疲劳" name="type"></el-checkbox>
            <el-checkbox label="睡眠缺乏" name="type"></el-checkbox>
            <el-checkbox label="情绪冲动" name="type"></el-checkbox>
            <el-checkbox label="声光电刺激" name="type"></el-checkbox>
            <el-checkbox label="代谢紊乱" name="type"></el-checkbox>
            <el-checkbox label="月经或妊娠早期" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="补充诱因" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>

        <el-form-item label="5、发作为" prop="region">
          <el-select v-model="ruleForm.region" placeholder="发作时期">
            <el-option label="清醒期为主" value="shanghai"></el-option>
            <el-option label="睡眠期为主" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="5、发作持续时间" prop="region">
          <el-select v-model="ruleForm.region" placeholder="发作时长">
            <el-option label="小于一分钟" value="shanghai"></el-option>
            <el-option label="小于一分钟" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="6、发作先兆感觉" prop="type">
          <el-checkbox-group
            v-model="ruleForm.type"
            style="display: flex; flex-wrap: wrap; flex-direction: column"
          >
            <el-checkbox label="无" name="type"></el-checkbox>
            <el-checkbox label="记忆障碍" name="type"></el-checkbox>
            <el-checkbox label="疲劳" name="type"></el-checkbox>
            <el-checkbox label="睡眠缺乏" name="type"></el-checkbox>
            <el-checkbox label="情绪冲动" name="type"></el-checkbox>
            <el-checkbox label="声光电刺激" name="type"></el-checkbox>
            <el-checkbox label="代谢紊乱" name="type"></el-checkbox>
            <el-checkbox label="月经或妊娠早期" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="补充先兆感觉" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>

        <el-form-item label="6、发作表现" prop="type">
          <el-checkbox-group
            v-model="ruleForm.type"
            style="
              display: flex;
              height: 540px;
              flex-wrap: wrap;
              flex-direction: column;
            "
          >
            <el-checkbox label="无" name="type"></el-checkbox>
            <el-checkbox label="记忆障碍" name="type"></el-checkbox>
            <el-checkbox label="疲劳" name="type"></el-checkbox>
            <el-checkbox label="睡眠缺乏" name="type"></el-checkbox>
            <el-checkbox label="情绪冲动" name="type"></el-checkbox>
            <el-checkbox label="声光电刺激" name="type"></el-checkbox>
            <el-checkbox label="代谢紊乱" name="type"></el-checkbox>
            <el-checkbox label="月经或妊娠早期" name="type"></el-checkbox>
            <el-checkbox label="无" name="type"></el-checkbox>
            <el-checkbox label="记忆障碍" name="type"></el-checkbox>
            <el-checkbox label="疲劳" name="type"></el-checkbox>
            <el-checkbox label="睡眠缺乏" name="type"></el-checkbox>
            <el-checkbox label="情绪冲动" name="type"></el-checkbox>
            <el-checkbox label="声光电刺激" name="type"></el-checkbox>
            <el-checkbox label="代谢紊乱" name="type"></el-checkbox>
            <el-checkbox label="月经或妊娠早期" name="type"></el-checkbox>
            <el-checkbox label="无" name="type"></el-checkbox>
            <el-checkbox label="记忆障碍" name="type"></el-checkbox>
            <el-checkbox label="疲劳" name="type"></el-checkbox>
            <el-checkbox label="睡眠缺乏" name="type"></el-checkbox>
            <el-checkbox label="情绪冲动" name="type"></el-checkbox>
            <el-checkbox label="声光电刺激" name="type"></el-checkbox>
            <el-checkbox label="代谢紊乱" name="type"></el-checkbox>
            <el-checkbox label="月经或妊娠早期" name="type"></el-checkbox>
            <el-checkbox label="无" name="type"></el-checkbox>
            <el-checkbox label="记忆障碍" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="补充我的症状表现" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <!--  -->

        <el-form-item label="5、发作持续时间" prop="region">
          <el-select v-model="ruleForm.region" placeholder="发作时长">
            <el-option label="小于一分钟" value="shanghai"></el-option>
            <el-option label="小于一分钟" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="5、发作持续时间" prop="region">
          <el-select v-model="ruleForm.region" placeholder="发作时长">
            <el-option label="小于一分钟" value="shanghai"></el-option>
            <el-option label="小于一分钟" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="5、发作持续时间" prop="region">
          <el-select v-model="ruleForm.region" placeholder="发作时长">
            <el-option label="小于一分钟" value="shanghai"></el-option>
            <el-option label="小于一分钟" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="5、发作持续时间" prop="region">
          <el-select v-model="ruleForm.region" placeholder="发作时长">
            <el-option label="小于一分钟" value="shanghai"></el-option>
            <el-option label="小于一分钟" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="5、发作持续时间" prop="region">
          <el-select v-model="ruleForm.region" placeholder="发作时长">
            <el-option label="小于一分钟" value="shanghai"></el-option>
            <el-option label="小于一分钟" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="5、发作持续时间" prop="region">
          <el-select v-model="ruleForm.region" placeholder="发作时长">
            <el-option label="小于一分钟" value="shanghai"></el-option>
            <el-option label="小于一分钟" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >提交</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="就诊记录"
      :visible.sync="VisitDialogVisible"
      width="100%"
      :before-close="handleClose"
      @touchmove.prevent
      fullscreen
    >
      <el-form ref="visitFormRef" :model="visitForm" label-position="top">
        <el-form-item label="1、发作时间">
          <el-col :span="13">
            <el-date-picker
              type="date"
              placeholder="日期"
              v-model="form.date1"
              style="width: 100%"
              @focus="elDatePickerOnFocus"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="2、发作次数">
          <el-col :span="20"><el-input v-model="form.name"></el-input></el-col>
          <el-col :span="4"><div style="margin-left: 6px">分钟</div></el-col>
        </el-form-item>
        <el-form-item label="3、发作年龄">
          <el-col :span="20"><el-input v-model="form.name"></el-input></el-col>
          <el-col :span="4"><div style="margin-left: 6px">分钟</div></el-col>
        </el-form-item>

        <el-form-item label="5、发作持续时间" prop="region">
          <el-select v-model="ruleForm.region" placeholder="发作时长">
            <el-option label="小于一分钟" value="shanghai"></el-option>
            <el-option label="小于一分钟" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="5、发作持续时间" prop="region">
          <el-select v-model="ruleForm.region" placeholder="发作时长">
            <el-option label="小于一分钟" value="shanghai"></el-option>
            <el-option label="小于一分钟" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="5、发作持续时间" prop="region">
          <el-select
            v-model="ruleForm.region"
            placeholder="发作时长"
            inline
            style="width: 30%"
          >
            <el-option label="小于一分钟" value="shanghai"></el-option>
            <el-option label="小于一分钟" value="beijing"></el-option>
          </el-select>
          <el-select
            v-model="ruleForm.region"
            placeholder="发作时长"
            inline
            style="width: 60%"
          >
            <el-option label="小于一分钟" value="shanghai"></el-option>
            <el-option label="小于一分钟" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="5、发作持续时间" prop="region">
          <el-select
            v-model="ruleForm.region"
            placeholder="发作时长"
            inline
            style="width: 30%"
          >
            <el-option label="小于一分钟" value="shanghai"></el-option>
            <el-option label="小于一分钟" value="beijing"></el-option>
          </el-select>
          <el-select
            v-model="ruleForm.region"
            placeholder="发作时长"
            inline
            style="width: 60%"
          >
            <el-option label="小于一分钟" value="shanghai"></el-option>
            <el-option label="小于一分钟" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="5、发作持续时间" prop="region">
          <el-select v-model="ruleForm.region" placeholder="发作时长">
            <el-option label="小于一分钟" value="shanghai"></el-option>
            <el-option label="小于一分钟" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="VisitDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="VisitDialogVisible = false"
          >提交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Record',
  data() {
    return {
      value: '',
      selectBtn: 'list1',
      list1: [
        {
          title: '发作诱因',
          desc: '无诱因',
          time: '2020.12.05',
          info: [
            { key: '发作时间段：', value: '清醒期为主' },
            { key: '发作持续时间：', value: '小于五分钟' },
            { key: '症状表现：', value: '突然发作' }
          ]
        },
        {
          title: '发作诱因',
          desc: '无诱因',
          time: '2020.12.05',
          info: [
            { key: '发作时间段：', value: '清醒期为主' },
            { key: '发作持续时间：', value: '小于五分钟' },
            { key: '症状表现：', value: '突然发作' }
          ]
        },
        {
          title: '发作诱因',
          desc: '无诱因',
          time: '2020.12.05',
          info: [
            { key: '发作时间段：', value: '清醒期为主' },
            { key: '发作持续时间：', value: '小于五分钟' },
            { key: '症状表现：', value: '突然发作' }
          ]
        }
      ],
      list2: [
        {
          title: '药品名：',
          desc: '加巴喷丁',
          time: '开始服用时间：2020.12.05',
          info: [
            { key: '当前状态：', value: '服药中' },
            { key: '服用剂量(早中晚)：', value: '小于五分钟' },
            { key: '副作用', value: '无' }
          ]
        },

        {
          title: '药品名：',
          desc: '加巴喷丁',
          time: '开始服用时间：2020.12.05',
          info: [
            { key: '当前状态：', value: '服药中' },
            { key: '服用剂量(早中晚)：', value: '小于五分钟' },
            { key: '副作用', value: '无' }
          ]
        }
      ],
      list3: [
        {
          title: '就诊医院',
          desc: '哈医大一院',
          time: '开始服用时间：2020.12.05',
          info: [
            { key: '就诊医生：', value: '梅茂炳' },
            { key: '诊断类型：', value: '全面-全面性强直-阵挛性发作' },
            { key: '诊断病因：', value: '症状性（结构性）癫痫海马硬化' }
          ]
        }
      ],
      dialogVisible: false,
      VisitDialogVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      visitForm: {},
      ruleForm: {
        type: []
      },
      fileList: [
        {
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ]
    }
  },
  computed: {
    selectList() {
      return this[this.selectBtn]
    }
  },
  methods: {
    dateChange() {
      console.log(this.value)
    },
    addDoc(target) {
      if (target === 'list1') {
        this.dialogVisible = true
      } else if (target === 'list2') {
        this.VisitDialogVisible = true
      }
    },
    btnActive(target) {
      this.selectBtn = target
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    onSubmit() {
      console.log('submit!')
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    elDatePickerOnFocus() {
      document.activeElement.blur()
    }
  }
}
</script>

<style scoped>
.options {
  display: flex;
  justify-content: space-between;
  /* border-bottom: 1px solid black; */
}

.option {
  width: 33.33%;
  color: #409eff;
  border: none;
  /* background-color: #ffffff; */
}
/* .options > .option {
  width: 33%;
  height: 50px;
  text-align: center;
  line-height: 50px;
}*/
.options > .option:not(:nth-last-child(1)) {
  /* border-right: 1px solid black; */
}
.date {
  /* width: 80%; */
  margin: 20px 13%;
  display: flex;
  justify-content: space-between;
}
.record-list {
  height: 400px;
  overflow: auto;
  background-color: #eee;
}
.van-panel {
  margin-bottom: 10px;
}
.van-cell__title > span {
  font-weight: bold;
}
.info {
  margin-left: 16px;
  font-size: 12.5px;
  font-weight: bold;
  padding-top: 5px;
}
.info span {
  font-size: 10px;
  font-weight: normal;
}
.active {
  color: white;
  background-color: #409eff;
}
.notActive {
  color: #409eff;
  background-color: white;
}
.el-dialog {
}

.resonse {
  display: flex;
  height: 180px;
  flex-wrap: wrap;
  flex-direction: column;
}
.dialog-footer {
  display: flex;
  justify-content: space-around;
}
</style>